<!DOCTYPE html>
<html id="html">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" type="text/css" href="images/public.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#top ul.right>li').hover(function(){
        $(this).toggleClass('hover').children('.details').finish().slideToggle(100);
    });
    $('#logoWrap div.nowCity').hover(function(){
        $(this).toggleClass('hover');    
    });
    $('#navWrap ul.nav>li').hover(function(){
        $(this).toggleClass('hover');
    });
    //幻灯效果
    var isRun=true;
    var slideNum=$('#slideWrap ul.slide>li').length;//页码数量以及幻灯数量
    var slideNumHtml='<ul class="num">';
    for(var i=1;i<=slideNum;i++){
        slideNumHtml+='<li>'+i+'</li>';
    }
    slideNumHtml+='</ul>';
    $('#slideWrap ul.slide').after(slideNumHtml);
    function showSlide(num){
        if(num==$('#slideWrap ul.num>li').index($('#slideWrap ul.num>li.current'))){
            return null;
        }
        $('#slideWrap ul.slide>li')
            .finish()
            .filter(':visible')
            .fadeOut()
            .css({'z-index':0})
            .end()
            .eq(num)
            .fadeIn()
            .css({'z-index':1});
        $('#slideWrap ul.num>li').filter('.current').removeClass('current').end().eq(num).addClass('current');
    }
    showSlide(0);
    $('#slideWrap ul.num>li').on('mouseenter.trigger',function(){
        showSlide($('#slideWrap ul.num>li').index(this));
    });
    $('#slideWrap ul.slide,#slideWrap ul.num>li').hover(function(){
        isRun=false;  
    },function(){
        isRun=true;
    });
    setInterval(function(){
        if(isRun) {
            if($('#slideWrap ul.num>li.current').next().length==0) {
                $('#slideWrap ul.num>li').eq(0).triggerHandler('mouseenter.trigger');
            }else{
                $('#slideWrap ul.num>li.current').next().triggerHandler('mouseenter.trigger');
            }
        }
    },5000);
    //幻灯效果结束
    $('#leftNav ul.nav>li').click(function(){
        $('#leftNav ul.nav>li').removeClass('current');
        $(this).addClass('current');
    });
    
    //每日特惠
    $('#contentBox>div.left>ul>li').hover(function(){
        $(this).find('h4').css({height:43});
        $(this).children('div.text').finish().css({opacity:0.6}).animate({opacity:1,height:75},200);
    },function(){
        $(this).find('h4').css({height:24});
        $(this).children('div.text').finish().css({height:55});
    });
    $('#contentBox>div.right>div.imgWrap').hover(function(){
        $(this).children('img.towCode').finish().animate({top:0},200);
    },function(){
        $(this).children('img.towCode').finish().animate({top:196},200);
    });
    
    
    
    //图片随着滚动条的滑动而加载  代码开始*******
    //使用，将需要延迟加载的图片的src属性修改为data-src，然后给需要延迟加载的图片加上delay这个css类
    $('img.delay').attr('src','images/loading.gif');//将所有需要延迟加载的图片设置一个初始的图片
    function delay(){
        if($('img.delay').length==0){
            $(window).off('.delay');
        }
        $('img.delay').each(function(){
            if($(this).offset().top<$(window).height()+$(window).scrollTop()){
                $(this).attr('src',$(this).data('src')).removeClass('delay');
            }else{
                return false;
            }
        });
    }
    delay();
    $(window).on('scroll.delay resize.delay',delay);
    //图片随着滚动条的滑动而加载  代码结束*******
    
    $('#redPeople a.close').on('click',function(){
        $('#redPeople').fadeOut();
    });
    
    $('#goTop').click(function(){
        $('html,body').animate({
            'scrollTop':0 
        });
    });
    $(window).on('scroll',function(){
        if($(window).scrollTop()>100){
            $('#goTop').show();
        }else{
            $('#goTop').hide();
        }
    });
});
</script>
</head>
<body class="w1190" style="height:1000px;">
<script type="text/javascript" src="js/ini.js"></script>
<div id="top">
    <div class="wrap">
        <div class="hello">          
            您好，欢迎使用LY.com访问同程！ 登录 注册 
        </div>
        <ul class="right">
            <li class="call">
                <div class="text">
                    电话
                    <span></span>
                </div>
                <div class="details">
                    嘿嘿
                </div>
            </li>
            <li class="teamwork">
                <div class="text">
                    合作中心
                    <span></span>
                </div>
                <div class="details">
                    合作中心
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="logoWrap">
    <div class="wrap">
        <div class="logo">
            <img src="images/topnormal.jpg" />
        </div>
        <div class="nowCity">
            <div class="text">
                无锡
                <span></span>
            </div>
            <div class="cityList">
                
            </div>
        </div>
        <div class="app">
            <a href="http://sifangku.com">
                <img src="images/app.png" />
            </a>
        </div>
    </div>
</div>
<div id="navWrap">
    <div class="wrap">
        <ul class="nav">
            <li>
                <a class="index" href="#">首页</a>
            </li>
            <li>
                <a href="#">景点<span></span></a>
                <div class="details wrapWidth">1</div>
            </li>
            <li>
                <a href="#">景点<span></span></a>
                <div class="details wrapWidth">2</div>
            </li>
            <li>
                <a href="#">景点<span></span></a>
                <div class="details wrapWidth">3</div>
            </li>
            <li>
                <a href="#">景点</a>
            </li>
            <li>
                <a href="#">景点<span></span></a>
                <div class="details wrapWidth">5</div>
            </li>
        </ul>
    </div>
</div>
<div id="slideWrap">
    <ul class="slide">
        <li>
            <a href="#"><img src="images/img1.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="images/img2.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="images/img3.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="images/img4.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="images/img5.jpg" /></a>
        </li>
    </ul>
</div>
<div id="leftNav" class="wrap">
    <ul class="nav">
        <li class="li0">
            <div class="text">
                <span></span>
                景点门票
            </div>
            <div class="details">景点门票</div>
        </li>
        <li class="li1 current">
            <div class="text">
                <span></span>
                酒店
            </div>
            <div class="details">酒店</div>
        </li>
    </ul>
</div>
<div id="contentBox" class="wrap">
    <h3>每日特惠</h3>
    <div class="line"></div>
    <div class="left">
        <ul>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth1.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth2.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth3.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth4.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth5.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth6.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth7.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="imgWrap">
                    <img src="images/mrth8.jpg" />
                </div>
                <div class="text">
                    <h4>天目湖君悦假日酒店1晚（含双早&80元鱼头抵用券）</h4>
                    <div class="info">
                        <div class="leftWrap">
                            <span class="unit">¥</span><span class="price">119</span>起
                        </div>
                        <div class="rightWrap">
                            周边游
                        </div>
                    </div>
                </div>
            </li>
        </ul> 
    </div>
    <div class="right">
        <div class="imgWrap">
            <img src="images/right1.jpg" />
            <img class="towCode" src="images/towCode.png" />
        </div>
        <div class="imgWrap">
            <img src="images/right2.jpg" />
            <img class="towCode" src="images/towCode.png" />
        </div>
    </div>
</div>
<div class="wrap">
    <p style="height:800px;"></p>
    <img class="delay" data-src="http://h.hiphotos.baidu.com/image/pic/item/dcc451da81cb39db599abb5bd2160924ab183061.jpg" />
    <p style="height:800px;"></p>
    <img class="delay" data-src="http://b.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3ef00959c0808ba61ea8d345b2.jpg" />
    <p style="height:800px;"></p>
    <img class="delay" data-src="http://b.hiphotos.baidu.com/image/pic/item/0823dd54564e9258b043f2ef9e82d158ccbf4ebf.jpg" />
    <p style="height:800px;"></p>
    <img class="delay" data-src="http://c.hiphotos.baidu.com/image/pic/item/d50735fae6cd7b89b49eb7840d2442a7d8330ec2.jpg" />
    <p style="height:800px;"></p>
    <img class="delay" data-src="http://e.hiphotos.baidu.com/image/pic/item/b3119313b07eca801973e5ea932397dda144834d.jpg" />
</div>
<div id="redPeople">
    <div class="redd"></div>
    <a class="close" href="javascript:;"></a>
</div>
<div id="goTop"></div>
</body>
</html>